<template>
  <el-menu
    :default-active="defActive"
    active-text-color="#409eff"
    background-color="#34495e"
    class="dw-menu-height dw-menu"
    mode="horizontal"
    router
    text-color="#fff"
    @select="handleSelect">
    <el-menu-item index="/answerer/View">回答问卷</el-menu-item>
    <el-menu-item index="/answerer/account">个人主页</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: "AnswerNavMenu",
  data(){
    return {
      defActive:'/answerer/View'
    }
  },
  watch: {
    $route: function (to, from) {
      this.setDefActive()
    }
  },
  mounted() {
    this.setDefActive()
  },
  methods:{
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    setDefActive() {
      const fullPath = this.$route.fullPath
      if (fullPath.indexOf('/answerer/View') >= 0) {
        this.defActive = '/answerer/View'
      } else if (fullPath.indexOf('/answerer/account') >= 0) {
        this.defActive = '/answerer/account'
      }else if (fullPath.indexOf('/admin/pwd') >= 0) {
        this.defActive = '/answerer/account'
      }
    }
  }
}
</script>

<style scoped>
.dw-menu-height, .dw-menu-height > .el-menu-item, .dw-menu-height > .el-submenu /deep/ .el-submenu__title {
  height: 80px;
  line-height: 80px;
  font-weight: 400;
  font-size: 16px;
}

.dw-menu {
  border-bottom: none;
}
</style>
